<template>
  <div class="SendSingle-selectPopup">
    <!-- 头部标题 -->
    <h2>
      <span @click="$parent.showpopup = false">取消</span>
      {{ title }}
      <span @click="confirm">确认</span>
    </h2>

    <!-- 搜索栏 -->
    <div class="search" v-if="needSearch">
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        @search="searchConfirm"
      />
    </div>

    <!-- list -->
    <div class="list" :class="{ addsix: !needSearch }">
      <van-list
        v-model="setloading"
        :finished="finished"
        finished-text="没有更多了"
        offset="50"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in showlist"
          :key="index + 'showlist'"
          :title="item[`${showkey}`]"
          :label="needLabel ? item[`${labelkey}`] : ''"
          @click="chooseIndex = index"
        >
          <template #right-icon>
            <van-icon v-if="index === chooseIndex" name="success" />
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  name: "SendSingle-selectPopup",

  props: {
    // 显示标题
    title: {
      type: String,
      default: "标题",
    },
    // 类型
    type: {
      type: Number,
      default: 0,
    },
    // 是否需要开启搜索
    needSearch: {
      type: Boolean,
      default: false,
    },
    // 是否需要显示标签
    needLabel: {
      type: Boolean,
      default: false,
    },
    // 展示数据集
    showlist: {
      type: Array,
      default: () => [],
    },
    // 展示字段
    showkey: {
      type: String,
      default: "",
    },
    // 展示标签字段
    labelkey: {
      type: String,
      default: "",
    },
    // 是否完成加载
    finished: {
      type: Boolean,
      default: true,
    },
    // 是否正在加载
    loading: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // list相关参数
      chooseIndex: -1,
      // 搜索
      searchValue: "",
      setloading: false,
    };
  },

  watch: {
    loading(n) {
      this.setloading = this.loading;
    },
    setloading(n) {
      this.$emit("change", n);
    },
  },

  methods: {
    // 加载更多
    onLoad() {
      if (this.showlist.length > 1) this.$emit("load", this.type);
    },

    // 确认选中
    confirm() {
      if (this.chooseIndex === -1) this.$toast("请先选择一条数据");
      else this.$emit("confirm", this.showlist[this.chooseIndex], this.type);
    },

    // 确认搜索
    searchConfirm(value) {
      this.$emit("search", value, 1);
    },
  },
};
</script>

<style lang='less'>
.SendSingle-selectPopup {
  background-color: #f6f7fb;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  h2 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw;
    margin-bottom: 0 !important;

    span {
      color: #7f8c8d;
    }
  }

  .search {
    height: 6vh;
  }

  .list {
    height: 88vh;
    overflow-y: scroll;

    &.addsix {
      height: 94vh;
    }
  }

  .van-search {
    padding: 0;
  }
  .van-search__content {
    background-color: #fff;
  }
}
</style>